<template>
  <div class="box">
    <div class="flex">
      <div>
        <el-form :inline="true" :model="where" label-position="top">
          <el-form-item>
            <el-input v-model="where.code" :placeholder="plugin.lang('voucher.code')" style="width:200px" clearable />
          </el-form-item>
          <el-form-item>
            <el-select v-model="where.status" :placeholder="plugin.lang('voucher.status')" style="width:150px" clearable>
              <el-option
                v-for="(item, index) in plugin.langTm('voucher.status_text')"
                :key="index"
                :label="item"
                :value="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="where.type" :placeholder="plugin.lang('voucher.type')" style="width:150px" clearable>
              <el-option
                v-for="(item, index) in plugin.langTm('voucher.type_text')"
                :key="index"
                :label="item"
                :value="index">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div style="width: 300px"><Daterange @date="date => where.time = date" /></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="voucherModel.page(1)" plain>
              <template #icon>
                <i class="iconfont min icon-search-max"></i>
              </template>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="form.open({})"> {{ lang.t('common.create') }}
          <template #icon>
            <i class="iconfont mini icon-add-max"></i>
          </template>
        </el-button>
      </div>
    </div>
    <Table 
      @log="data => log.open(data.log)"
      @status="data => status.open(data)"
      @delete="data => voucherModel.del(data.id)"
      @print="onPrint"
    />
    <div class="page">
      <el-pagination
        @current-change="voucherModel.page"
        v-model:currentPage="where.page"
        :page-size="where.page_size"
        layout="total, prev, pager, next, jumper"
        :total="where.page_total"
        background>
      </el-pagination>
    </div>
    <Form ref="form" />
    <Log ref="log" />
    <Status ref="status" />
    <KeyCode @ok="onScanBarCode" :window="true" />
  </div>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import voucherModel from '../../model/voucher'

import Table from './table'
import Form from './form'
import Log from './log'
import Status from './status'
import Daterange from '@/components/daterange'
import KeyCode from '@/components/keyCode'

export default {
  components: {
    KeyCode,
    Daterange,
    Table,
    Form,
    Log,
    Status
  },
  setup() {
    // 条件 
    const where = voucherModel.data

    // 表单
    const form = ref(null)

    // 日志
    const log = ref(null)

    // 核销
    const status = ref(null)
    
    // 条码查询
    const onScanBarCode = code => {
      where.value.page = 1
      where.value.code = code
      voucherModel.page(1)
    }

    // 打印
    const onPrint = data => {
      voucherModel.print(data)
    }

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      voucherModel,
      where,
      form,
      log,
      status,
      onScanBarCode,
      onPrint
    }
  }
}
</script>